<template>
	<div class="uploade_file_item">
		<div class="wrapper">
			<div class="name">
				<i :class="{ checked: file.checked }" v-if="isCheck" @click="handleCheckedFile"></i>
				<span :title="file.oldName" @click="handleCheckedFile">{{ file.oldName }}</span>
			</div>
			<div class="size">{{ !file.attrSize ? 0 : file.attrSize | fileSizeFitler }}</div>
			<div class="status" v-html="fileStatusText"></div>
			<div class="handle">
				<button @click.prevent="handlePreviewFile" v-if="!isPreview && !!file.attrSize">预览</button>
				<button @click.prevent="handleDeleteFile">删除</button>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import computeFileMD5 from './calcMD5.js';
import { fileSizeFitler } from './filter.js';
export default {
	props: {
		file: {
			type: Object,
			default () {
				return {};
			}
		},
		isCheck: Boolean,
		currentChecked: String
	},
	data() {
		return {
			fileStatusText: null
		};
	},
	filters: { fileSizeFitler },
	computed: {
		...mapGetters(['token']),
		isPreview() {
			return !this.$listeners.preview;
		}
	},
	mounted() {
		let checkArr = !this.currentChecked ? [] : this.currentChecked.split(',');
		if(checkArr.indexOf(this.file.id) !== -1) {
			this.$set(this.file, 'checked', true);
		}
		this.fileStatusText = !this.file.attrSize ? '' : `<font color="#67c23a">上传完成</font>`;
	},
	methods: {
		//预览文件
		handlePreviewFile() {
			this.$emit('preview', this.file.id);
		},
		//删除文件
		handleDeleteFile() {
			let fileArr = this.$parent.echoFileList;
			let index = fileArr.findIndex(item => item.id === this.file.id);
			fileArr.splice(index, 1);
		},
		//选中文件
		handleCheckedFile() {
			if(!this.file.checked) {
				this.$set(this.file, 'checked', true);
			} else {
				this.$set(this.file, 'checked', false);
			}
		}
	}
};
</script>

<style scoped>
.uploade_file_item {
	line-height: 1;
	position: relative;
	border-radius: 3px;
	border: solid 1px #eee;
	margin-top: -1px;
}

.uploade_file_item .wrapper {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
	overflow: hidden;
	max-width: none;
	min-width: 0;
}

.uploade_file_item .name {
	display: flex;
	align-items: center;
	padding-left: 10px;
	flex: 1;
	overflow: hidden;
}

.uploade_file_item .name span {
	width: auto;
	line-height: 1;
	margin-left: 6px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	cursor: pointer;
	user-select: none;
}

.uploade_file_item .name i {
	width: 6px;
	height: 6px;
	padding: 3px;
	flex-shrink: 0;
	border: solid 2px #0063ca;
	cursor: pointer;
}

.uploade_file_item .name i.checked::before {
	display: block;
	width: 6px;
	height: 6px;
	content: '';
	background-color: #0063ca;
}

.uploade_file_item .status {
	width: 120px;
	margin-left: 10px;
}

.uploade_file_item .size {
	width: 80px;
	flex-shrink: 0;
	padding: 0 10px;
	text-align: right;
}

.uploade_file_item .handle {
	width: 110px;
	flex-shrink: 0;
	font-size: 0;
	padding: 10px;
	text-align: right;
}

.uploade_file_item .handle button {
	display: inline-block;
	font-size: 14px;
	line-height: 1;
	padding: 5px;
	outline: 0;
	border: none 0;
	color: #409eff;
	background-color: transparent;
	vertical-align: top;
}

.uploade_file_item .handle button:hover {
	color: #0063ca;
}
</style>